<script lang="ts" setup>
import { reactive, ref } from 'vue';
import type { FormInstance } from 'element-plus';
const data = reactive({
  form: [
    {
      value: [],
      rules: {
        type: 'array',
        required: true,
        message: '请选择',
        trigger: 'change'
      },
      timeList: [
        {
          startTime: '',
          endTime: '',
          rules: {
            required: true,
            message: '请选择',
            trigger: 'change'
          }
        }
      ]
    }
  ]
});

const ruleFormRef = ref<FormInstance>();
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!');
    } else {
      console.log('error submit!', fields);
    }
  });
  console.log(data);
};

const addCheckForm = (fs) => {
  fs.form.push({
    value: [],
    rules: {
      type: 'array',
      required: true,
      message: '请选择',
      trigger: 'change'
    },
    timeList: [
      {
        startTime: '',
        endTime: '',
        rules: {
          required: true,
          message: '请选择',
          trigger: 'change'
        }
      }
    ]
  });
};

const addTimeForm = (fs) => {
  fs.timeList.push({
    startTime: '',
    endTime: '',
    rules: {
      required: true,
      message: '请选择',
      trigger: 'change'
    }
  });
};

const values = ref(0);
</script>

<template>
  <div class="forms-container m-2">
    <el-form ref="ruleFormRef" :model="data">
      <div v-for="(fs, index) of data.form">
        <el-form-item :prop="`form.${index}.value`" :rules="fs.rules">
          <div class="flex w-full mb-2">
            <el-checkbox-group v-model="fs.value" class="mr-2">
              <el-checkbox label="测试1" name="type" />
              <el-checkbox label="测试2" name="type" />
              <el-checkbox label="测试3" name="type" />
            </el-checkbox-group>
            <el-button type="primary" @click="addCheckForm(data)">添加</el-button>
          </div>
        </el-form-item>
        <div class="flex flex-col w-full mb-2" v-for="(time, indexs) in fs.timeList">
          <div class="flex">
            <el-form-item class="mr-2" :prop="`form.${index}.timeList.${indexs}.startTime`" :rules="time.rules">
              <el-time-picker v-model="time.startTime" placeholder="Pick a time" class="w-full-hirc" />
            </el-form-item>
            <el-form-item class="mr-2" :prop="`form.${index}.timeList.${indexs}.endTime`" :rules="time.rules">
              <el-time-picker v-model="time.endTime" placeholder="Pick a time" class="w-full-hirc" />
            </el-form-item>
            <el-button type="primary" v-if="indexs === fs.timeList.length - 1" @click="addTimeForm(fs)">添加</el-button>
          </div>
        </div>
      </div>
      <el-form-item>
        <el-button class="mt-2" type="primary" @click="submitForm(ruleFormRef)"> 提交 </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="scss" scoped></style>
